<template>
<div class="number-trans">
  <el-page-header @back="back" content="用户名转账">
  </el-page-header>
  <div class="box">
    <el-form ref="transferForm" :model="transferForm" label-width="120px" :rules="transferRules">
    <el-form-item label="收款人用户名" prop="payeeName">
        <el-input v-model="transferForm.payeeName"></el-input>
    </el-form-item>

    <el-form-item label="转账金额" prop="amount">
        <el-input v-model="transferForm.amount"></el-input>
    </el-form-item>

    <el-form-item label="支付密码" prop="payPwd">
      <el-input type="password" v-model="transferForm.payPwd"></el-input>
    </el-form-item>
    <el-form-item>
        <el-button type="primary" @click="usernameTransfer()">转账</el-button>
    </el-form-item>
    </el-form>
    </div>
</div>
</template>

<script>
import {transByName} from "@/api/Transfer";

  export default {
    name: "index",
    data() {
      var moneyReg = (rule,value,callback) => {
        if(value.length > 10){
          callback(new Error('长度在 0 到 10 个字符'));
        }else{
          setTimeout(() => {
            if (!/^\d+[.]?\d{0,2}$/.test(value) && value){
              callback(new Error('请输入正整数或小数保留两位小数'));
            }else{
              callback()
            }
          }, 500);
        }

      };
      return {
        transferForm: {
          payerId: '',
          payeeName: '',
          payPwd: '',
          amount: ''
        },
        transferRules:{
        payeeName: [
          {required: true, trigger: "blur", message: "请输入收款用户名"}
        ],
        amount: [
          {required: true, trigger: "blur", validator:moneyReg}
        ],
        payPwd: [
          {required: true, trigger: "blur", message: "请输入您的支付密码"}
        ]
      },
      }
    },
    methods: {
      usernameTransfer() {
        this.$refs.transferForm.validate(valid=>{
          if(valid){
            this.$alert('<p>是否确认转账</p>' +
            '<p>转账金额：'+this.transferForm.amount+'</p>'
            ,'转账',{
              dangerouslyUseHTMLString: true,
              confirmButtonText: '确定',
              cancelButtonText: '取消',
            }).then(()=>{
              this.transferForm.payerId = this.$store.state.user.userInfo.userId
              const req = {
                payerId: this.transferForm.payerId,
                payeeName: this.transferForm.payeeName,
                payPwd: this.transferForm.payPwd,
                amount: this.transferForm.amount
              }
              console.log(req);
              transByName(req).then(res=>{
                this.$message({
                  message: res.content,
                  type: 'success'
                })
                this.$router.push('/home');
              })
            }).catch(()=>{
              this.$message({
                type: 'info',
                message: '取消提交'
              });
            });
          }
        })
      },
      back() {
        this.$router.push("/transfer");
      }
    }
  }
</script>
<style scoped>
.number-trans{
  margin-top: 30px;
}
.box{
    margin: 60px 300px;
    width: 500px;
    text-align: center;
}
</style>
